<template>
  <div class="chartContainer">
    <div id="myChart1" class="chart1"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import 'echarts-gl';
import jsonData from '@/assets/data2.js'
export default {
  name: 'Chart3dchart',

  data() {
    return {
      myChart1: null,
      option: {
        grid3D: {

        },
        tooltip: {
          show: true,

          // extraCssText: 'width:150px;height:60px',
          formatter: function (params, ticket, callback) {
            let htmlStr = '';
            htmlStr += `<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:${params.color}"></span>${params.seriesName}<br>`
            // htmlStr += '<div>'
            // htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;>' + params.value[0] + '</span>';

            // for (var i = 0; i < params.value.length; i++) {
            //   htmlStr += `<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:${params.color}"></span>${params.value[i]}<br>`

            // }
            htmlStr += `收入：${params.value[0]}<br>`
            htmlStr += `生活期望：${params.value[1]}<br>`
            htmlStr += `人口：${params.value[2]}<br>`
            htmlStr += `国家：${params.value[3]}<br>`
            htmlStr += `年份：${params.value[4]}<br>`
            // htmlStr += '</div>'
            return htmlStr;
          },

        },
        xAxis3D: {
          type: 'category'
        },
        yAxis3D: {
          type: 'category'
        },
        zAxis3D: {},
        visualMap: {
          max: 100000,
          dimension: 'Population',
        },
        dataset: {
          dimensions: [
            'Income',
            'Life Expectancy',
            'Population',
            'Country',
            { name: 'Year', type: 'ordinal' }
          ],
          source: jsonData
        },
        series: [
          {
            type: 'bar3D',
            name: '三维图',
            // symbolSize: symbolSize,
            shading: 'lambert',
            encode: {
              x: 'Year',
              y: 'Country',
              z: 'Life Expectancy',
              // tooltip: [0, 1, 2, 3, 4],
              // label: {
              //   show: true,
              //   distance: 2,
              //   formatter: function (params) {
              //     return 'Values:' + params.value
              //   }
              // }
            }
          }
        ]
      }
    };
  },

  mounted() {
    this.initCharts();

    window.addEventListener("resize", () => {
      this.myChart1.resize();
    });
  },

  methods: {
    initCharts() {
      this.myChart1 = this.$echarts.init(document.getElementById("myChart1"));

      //   this.myChart.clear();
      //   setTimeout(this.myChart.setOption(this.option), 500);
      this.myChart1.setOption(this.option);

    },
  },
  beforeDestroy() {
    /* 页面组件销毁的时候，别忘了移除绑定的监听resize事件，否则的话，多渲染几次
        容易导致内存泄漏和额外CPU或GPU占用哦*/
    window.removeEventListener("resize", () => {
      this.myChart1.resize();
    });
  },
};
</script>

<style lang="scss" scoped>
.chartContainer {
  width: 400px;

}

.myChart {
  width: 400px;
  height: 400px;
}

#myChart1 {
  width: 400px;
  height: 400px;
}
</style>